<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>编辑流程实例</title>
	<#include "/common/resource.ftl">
	<script type="text/javascript">
        $(function () {
            $.ajaxRequest({
                url: '${params.contextPath}/web/workflowDefine/queryList',
                //data: {id: "${params.id!}"},
                success: function (data) {
                    if (!data.success) {
                        $.message(data.message);
                        return;
                    }
                    var html = $.template("image-template", {list: data.data});
                    $(".image-container").html(html);
                }
            });

            $(".image-container").on("click", ".image-item .content", function () {
                var defineId = $(this).attr("data-id");
                var url = "${params.contextPath!}" + $(this).attr("data-form") + "?defineId=" + defineId;
                location.href = url;
            });
        });
	</script>
    <style>
        .image-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:left;padding:20px;}
        .image-item{height:150px;border1:1px solid #f2f2f2;border-radius:5px;color:#fff;flex:0 0 20%;box-sizing:border-box;}
        .image-item .content{margin:0 auto;background:#009688;cursor:pointer;width:120px;height:100px;margin-top:15px;border-radius:5px;line-height:20px;text-align:center;padding-top:20px;line-height:40px;}
        .image-item img{width:50px;}
        .no-data{display:block;line-height:100px;width:100%;border:1px solid #e2e2e2;text-align:center;font-size:18px;border-radius:5px;margin-top:20px;}
    </style>
</head>
<body style="background:#fff;">
<script id="image-template" type="text/html" style="display: none">
    {{ each list item index }}
        <div class="image-item">
            <div class="content" data-id="{{item.id}}" data-form="{{item.formPath}}_edit">
                <img src="${params.contextPath}/static/img/flow.png" alt="">
                <p>{{item.name}}</p>
            </div>
        </div>
    {{ /each }}
</script>
<div class="image-container"></div>
</body>

</html>
